<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
	encoding="utf-8" renderKitId="PRIMEFACES_MOBILE">

	<pm:page title="#{msgs.mobile_login}">
		<f:facet name="postinit">
			<script lang="JavaScript" src="#{request.contextPath}/js/custom.js" />
			<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.css"
				rel="stylesheet" />
			<link type="text/css"
				href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"
				rel="stylesheet" />

			<!-- NOTE: Script load order is significant! -->
			<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
			<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
			<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
			<script type="text/javascript"
				src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.js" />
			<script type="text/javascript"
				src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
			<script type="text/javascript"
				src="http://dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.hr.js"></script>


			<script type="text/javascript">
				$(document).bind('pagechange', function() { 
				  	$('.ui-page-active .ui-listview').listview('refresh'); 
				  	$('.ui-page-active :jqmData(role=content)').trigger('create');}); 
				
				jQuery.extend(jQuery.mobile.datebox.prototype.options, {
				    'dateFormat': '%d/%m/%Y'
				});
			</script>
		</f:facet>

		<pm:view id="main" swatch="b">
			<pm:header title="#{msgs.login_title}" />

			<pm:content>
				<h:form id="mainform">
					<p:messages id="messages" />
					<p:inputText id="username" value="#{mloginBean.user.userName}" required="true"
						label="#{msgs.login_user}" />

					<h:outputLabel value="#{msgs.login_password}" for="password" />
					<p:password id="password" value="#{mloginBean.user.userPwd}" label="#{msgs.login_password}"
						required="true" />

					<p />
					<p:commandLink value="#{msgs.button_login}" action="#{mloginBean.loginEvokMobile}"
						type="button" update="messages,:doctorReservationForm" />
				</h:form>
			</pm:content>
		</pm:view>

		<pm:view id="doctorReservationView" swatch="b">
			<h:form>
				<pm:header title="#{msgs.patient_reservation}" swatch="b">
					<f:facet name="left">
						<p:commandLink action="#{mloginBean.logout}" value="#{msgs.button_cancel}" />
					</f:facet>
					<f:facet name="right">
						<p:commandLink action="#{mReservationBean.addPrivateAction}" update=":doctorPrivateDetailForm"
							value="#{msgs.button_add}" />
					</f:facet>
				</pm:header>
			</h:form>

			<ui:include src="doctor_reservation_query.xhtml" />
		</pm:view>

		<pm:view id="doctorPrivateView" swatch="b">
			<h:form>
				<pm:header title="#{mReservationBean.qyDate} private" swatch="b">
					<f:facet name="left">
						<p:button href="#doctorReservationView?reverse=true" value="#{msgs.button_back}" icon="back"
							iconPos="notext" />
					</f:facet>

					<f:facet name="right">
						<p:commandLink action="#{mloginBean.logout}" value="#{msgs.button_cancel}" />
					</f:facet>
				</pm:header>
			</h:form>

			<ui:include src="doctor_private_detail.xhtml" />
		</pm:view>

		<pm:view id="doctorPatientView" swatch="b">
			<h:form>
				<pm:header title="#{mReservationBean.qyDate} patient" swatch="b">
					<f:facet name="left">
						<p:button href="#doctorReservationView?reverse=true" value="#{msgs.button_back}" icon="back"
							iconPos="notext" />
					</f:facet>

					<f:facet name="right">
						<p:commandLink action="#{mloginBean.logout}" value="#{msgs.button_cancel}" />
					</f:facet>
				</pm:header>
			</h:form>

			<ui:include src="doctor_patient_detail.xhtml" />
		</pm:view>

		<pm:view id="doctorPrivateDeleteView" swatch="b">
			<h:form>
				<pm:header title="#{mReservationBean.qyDate} patient" swatch="b">
					<f:facet name="left">
						<p:button href="#doctorPrivateView?reverse=true" value="#{msgs.button_back}" icon="back"
							iconPos="notext" />
					</f:facet>

					<f:facet name="right">
						<p:commandLink action="#{mloginBean.logout}" value="#{msgs.button_cancel}" />
					</f:facet>
				</pm:header>
			</h:form>

			<ui:include src="doctor_private_delete.xhtml" />
		</pm:view>

		<pm:view id="doctorPatientDeleteView" swatch="b">
			<h:form>
				<pm:header title="#{mReservationBean.qyDate} patient" swatch="b">
					<f:facet name="left">
						<p:button href="#doctorPatientView?reverse=true" value="#{msgs.button_back}" icon="back"
							iconPos="notext" />
					</f:facet>

					<f:facet name="right">
						<p:commandLink action="#{mloginBean.logout}" value="#{msgs.button_cancel}" />
					</f:facet>
				</pm:header>
			</h:form>

			<ui:include src="doctor_patient_delete.xhtml" />
		</pm:view>

	</pm:page>
</f:view>